<template>
  <div class="common-warp wh100 warp-bg">
    <div class="search">
      <Search @onSearch="handleSearch" />
    </div>
    <List ref="myTable" v-bind="state.listData" @othenBtnOne="handleAddEmployee" @othenBtnTwo="handleAddDev"
      @edit="handleEdit" @del="handleDel">
    </List>
    <Add @add="handleAdd" />
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue';
import List from '@/components/list/index.vue';
import Add from '@/components/add/index.vue';
import Search from '@/components/search/index.vue';
const state = reactive({
  listData: {
    data: [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      }

    ],
    config: {
      total: 14,         // 列表总数
    },
  }
})


const handleAddEmployee = () => {
  console.log('handleAddEmployee');
}
const handleAddDev = () => {
  console.log('handleAddDev');
}
const handleEdit = () => {
  console.log('handleEdit');
}
const handleDel = () => {
  console.log('handleDel');
}
const handleAdd = () => {
  console.log('handleAdd');
}

let timer = null;
let myTable = ref();
let totle = ref()
onMounted(() => {
  console.log(myTable.value.dataLength, '123');
  totle = myTable.value.dataLength
})

watch(myTable.value?.dataLength, (newValue, oldValue) => {
  console.log(newValue, oldValue, '111');
})

const createScroll = () => {
  // const table = myTable.value.layout.table.refs;
  // const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild;
  // tableWrapper.scrollTop += 1;
  // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
  // if (tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
  //   tableWrapper.scrollTop = 0;
  // }
  // console.log(myTable);
  // console.log(tableWrapper);


};

// let listener = window.addEventListener('scroll', () => {
//   console.log(myTable.value, '1');
//   console.log(myTable.value?.clientHeight, '2');
//   // console.log(myTable.value?.scrollTop);
//   // console.log(myTable.value?.scrollHeight);
// });



</script>
<style scoped lang='less'></style>